{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end"><a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fa-solid fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    <div class="card mb-3">
      <div class="card-header">{{ text_subscription }}</div>
      <div class="card-body">

        <form id="form-subscription">
          <div class="row row-cols-1 row-cols-sm-1 row-cols-md-3 row-cols-xl-3">
            <div class="col">
              <div class="input-group mb-3">
                <div class="form-control border rounded-start">
                  <div class="lead"><strong>{{ text_subscription_id }}</strong>
                    <br/>
                    <div id="subscription-value">{{ subscription_id }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="input-group mb-3">
                <div class="form-control border rounded-start">
                  <div class="lead"><strong>{{ text_order_id }}</strong>
                    <br/>
                    <div id="order-value"><a href="index.php?route=sale/order|info&user_token={{ user_token }}&order_id={{ order_id }}" target="_blank">{{ order_id }}</a></div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col">
              <div class="input-group mb-3">
                <div class="form-control border rounded-start">
                  <div class="lead"><strong>{{ text_customer }}</strong>
                    <div id="customer-value"><a href="index.php?route=customer/customer|form&user_token={{ user_token }}&customer_id={{ customer_id }}" target="_blank">{{ customer }}</a></div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col">
              <div class="form-control p-0 border rounded mb-3">
                <div class="lead p-2"><strong>{{ text_date_added }}</strong>
                  <br/>
                  {{ date_added }}
                </div>
              </div>
            </div>

            <div class="col">
              <div class="form-control p-0 border rounded mb-3">
                <div class="lead p-2"><strong>{{ text_remaining }}</strong>
                  <br/>
                  {% if duration %}
                    {{ remaining }}
                  {% else %}
                    {{ text_cancel }}
                  {% endif %}
                </div>
              </div>
            </div>

            <div class="col">
              <div class="form-control p-0 border rounded mb-3">
                <div class="lead p-2"><strong>{{ text_date_next }}</strong>
                  <br/>
                  {{ date_next }}
                </div>
              </div>
            </div>

            <div class="col">
              <div class="form-control p-0 border rounded mb-3">
                <div class="lead p-2"><strong>{{ text_order_status }}</strong>
                  <br/>
                  {{ order_status }}
                </div>
              </div>
            </div>

            <div class="col">
              <div class="form-floating mb-3">
                <select name="subscription_plan_id" id="input-subscription-plan" class="form-select">
                  <option value="">{{ text_select }}</option>
                  {% for subscription_plan in subscription_plans %}
                    <option value="{{ subscription_plan.subscription_plan_id }}"{% if subscription_plan.subscription_plan_id == subscription_plan_id %} selected{% endif %}>{{ subscription_plan.name }}</option>
                  {% endfor %}
                </select> <label for="input-subscription-plan">{{ entry_subscription_plan }}</label>
              </div>
            </div>

            <div class="col">
              <div class="form-floating mb-3">
                <select name="customer_payment_id" id="input-payment-method" class="form-select">
                  <option value="">{{ text_select }}</option>
                  {% for payment_method in payment_methods %}
                    <option value="{{ payment_method.customer_payment_id }}"{% if payment_method.customer_payment_id == customer_payment_id %} selected{% endif %}>{{ payment_method.name }}</option>
                  {% endfor %}
                </select>
                <label for="input-payment-method">{{ entry_payment_method }}</label>
              </div>
            </div>

          </div>

          <fieldset>
            <legend>{{ text_product }}</legend>
            <table class="table table-bordered">
              <thead>
                <tr>
                  <td>{{ column_product }}</td>
                  <td>{{ column_quantity }}</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><a href="{{ product }}" target="_blank">{{ product_name }}</a><br/>
                    <small class="text-muted">{{ description }}</small>
                  </td>
                  <td>{{ quantity }}</td>
                </tr>
              </tbody>
            </table>
          </fieldset>

          <input type="hidden" name="subscription_id" value="{{ subscription_id }}" id="input-subscription-id"/>
        </form>

      </div>
    </div>

    <div class="card">
      <div class="card-header"><i class="fa-solid fa-list"></i> {{ text_history }}</div>
      <div class="card-body">
        <ul class="nav nav-tabs">
          <li class="nav-item"><a href="#tab-history" data-bs-toggle="tab" class="nav-link active">{{ tab_history }}</a></li>
          <li class="nav-item"><a href="#tab-transaction" data-bs-toggle="tab" class="nav-link">{{ tab_transaction }}</a></li>
          {% for tab in tabs %}
            <li class="nav-item"><a href="#tab-{{ tab.code }}" data-bs-toggle="tab" class="nav-link">{{ tab.title }}</a></li>
          {% endfor %}
        </ul>
        <div class="tab-content">

          <div id="tab-history" class="tab-pane active">
            <fieldset>
              <legend>{{ text_history }}</legend>
              <div id="history">{{ history }}</div>
            </fieldset>
            <form id="form-history">
              <fieldset>
                <legend>{{ text_history_add }}</legend>
                <div class="row mb-3">
                  <label for="input-subscription-status" class="col-sm-2 col-form-label">{{ entry_subscription_status }}</label>
                  <div class="col-sm-10">
                    <select name="subscription_status_id" id="input-subscription-status" class="form-select">
                      {% for subscription_status in subscription_statuses %}
                        <option value="{{ subscription_status.subscription_status_id }}"{% if subscription_status.subscription_status_id == subscription_status_id %} selected{% endif %}>{{ subscription_status.name }}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-override" class="col-sm-2 col-form-label">{{ entry_override }}</label>
                  <div class="col-sm-10">
                    <div class="btn-group">
                      <input type="radio" name="override" value="1" id="input-override-yes" class="btn-check"/> <label for="input-override-yes" class="btn btn-outline-secondary">{{ text_yes }}</label> <input type="radio" name="override" value="0" id="input-override-no" class="btn-check" checked/> <label for="input-override-no" class="btn btn-outline-secondary">{{ text_no }}</label>
                    </div>
                    <div class="form-text">{{ help_override }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-notify" class="col-sm-2 col-form-label">{{ entry_notify }}</label>
                  <div class="col-sm-10">
                    <div class="btn-group">
                      <input type="radio" name="notify" value="1" id="input-notify-yes" class="btn-check"/> <label for="input-notify-yes" class="btn btn-outline-secondary">{{ text_yes }}</label> <input type="radio" name="notify" value="0" id="input-notify-no" class="btn-check" checked/> <label for="input-notify-no" class="btn btn-outline-secondary">{{ text_no }}</label>
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-comment" class="col-sm-2 col-form-label">{{ entry_comment }}</label>
                  <div class="col-sm-10">
                    <textarea name="comment" rows="8" placeholder="{{ entry_comment }}" id="input-comment" class="form-control"></textarea>
                  </div>
                </div>
                <div class="text-end">
                  <button type="submit" id="button-history" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i> {{ button_history_add }}</button>
                </div>
              </fieldset>

            </form>
          </div>

          <div id="tab-transaction" class="tab-pane">
            <fieldset>
              <legend>{{ text_transaction }}</legend>
              <div id="transaction">{{ transaction }}</div>
            </fieldset>
            <form id="form-transaction">
              <fieldset>
                <legend>{{ text_transaction_add }}</legend>
                <div class="row mb-3">
                  <label for="input-description" class="col-sm-2 col-form-label">{{ entry_description }}</label>
                  <div class="col-sm-10">
                    <input type="text" name="description" value="" placeholder="{{ entry_description }}" id="input-description" class="form-control"/>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-amount" class="col-sm-2 col-form-label">{{ entry_amount }}</label>
                  <div class="col-sm-10">
                    <input type="text" name="amount" value="" placeholder="{{ entry_amount }}" id="input-amount" class="form-control"/>
                  </div>
                </div>
                <div class="text-end">
                  <button type="submit" id="button-transaction" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i> {{ button_transaction_add }}</button>
                </div>
              </fieldset>
              <input type="hidden" name="subscription_id" value="{{ subscription_id }}" id="input-subscription-id"/>
            </form>
          </div>

          {% for tab in tabs %}
            <div id="tab-{{ tab.code }}" class="tab-pane">{{ tab.content }}</div>
          {% endfor %}

        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('#input-subscription-plan, #input-payment-method').on('change', function (e) {
    e.preventDefault();

    var element = this;

    $.ajax({
        url: 'index.php?route=sale/subscription|save&user_token={{ user_token }}&subscription_id=' + $('#input-subscription-id').val(),
        type: 'post',
        dataType: 'json',
        data: $('#form-subscription').serialize(),
        contentType: 'application/x-www-form-urlencoded',
        beforeSend: function () {
            $(element).prop('disabled', true).addClass('loading');
        },
        complete: function () {
            $(element).prop('disabled', false).removeClass('loading');
        },
        success: function (json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            if (json['success']) {
                $('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

$('#history').on('click', '.pagination a', function (e) {
    e.preventDefault();

    $('#history').load(this.href);
});

$('#form-history').on('submit', function (e) {
    e.preventDefault();

    $.ajax({
        url: 'index.php?route=sale/subscription|addHistory&user_token={{ user_token }}&subscription_id=' + $('#input-subscription-id').val(),
        type: 'post',
        dataType: 'json',
        data: $('#form-history').serialize(),
        contentType: 'application/x-www-form-urlencoded',
        beforeSend: function () {
            $('#button-history').prop('disabled', true).addClass('loading');
        },
        complete: function () {
            $('#button-history').prop('disabled', false).removeClass('loading');
        },
        success: function (json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            if (json['success']) {
                $('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

                $('#history').load('index.php?route=sale/subscription|history&user_token={{ user_token }}&subscription_id=' + $('#input-subscription-id').val());

                $('#input-history').val('');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

$('#transaction').on('click', '.pagination a', function (e) {
    e.preventDefault();

    $('#transaction').load(this.href);
});

$('#form-transaction').on('submit', function (e) {
    e.preventDefault();

    $.ajax({
        url: 'index.php?route=sale/subscription|addTransaction&user_token={{ user_token }}&subscription_id=' + $('#input-subscription-id').val(),
        type: 'post',
        dataType: 'json',
        data: $('#form-transaction').serialize(),
        contentType: 'application/x-www-form-urlencoded',
        beforeSend: function () {
            $('#button-transaction').prop('disabled', true).addClass('loading');
        },
        complete: function () {
            $('#button-transaction').prop('disabled', false).removeClass('loading');
        },
        success: function (json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            if (json['success']) {
                $('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

                $('#transaction').load('index.php?route=sale/subscription|transaction&user_token={{ user_token }}&subscription_id=' + $('#input-subscription-id').val());

                $('#input-transaction-amount').val('');
                $('#input-transaction-description').val('');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});
//--></script>
{{ footer }}
